<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
       研学活动添加
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

   <style>
        .imgs{display: none;}
        .picture{display: none;}
    </style>

    <!--百度编辑器-->
    <script src="./ueditor/ueditor.config.js"></script>
    <script src="./ueditor/ueditor.all.min.js"></script>
    <script src="./ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>

<div class="layui-card">
    <form class="layui-form layui-form-pane" action="" id="add">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>活动详情</li>
            </ul>

            <div class="layui-tab-content" >
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class='x-red'>*</span>活动主题
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" placeholder="空制在80个汉字，160个字符以内"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>活动类型
                        </label>
                        <div class="layui-input-block">
                            <select name="actity_category_id" id="actity_category_id">
                                <option value="0">---请选择活动类型---</option>

                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>活动地址
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="address"  placeholder="空制在80个汉字，160个字符以内"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>活动时间
                        </label>
                        <div class="layui-input-block layui-form">
                            <input class="layui-input" autocomplete="off" placeholder="活动日期" name="appllyTime" id="appllyTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>可参加人数
                        </label>
                        <div class="layui-input-block">
                            <input type="number" name="peoplenumber"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>报名开始时间
                        </label>
                        <div class="layui-input-block layui-form" >
                            <input class="layui-input" autocomplete="off" placeholder="开始日期" name="startTime" id="start">

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>报名结束时间
                        </label>
                        <div class="layui-input-block layui-form">
                            <input class="layui-input" autocomplete="off" placeholder="结束日期" name="endTime" id="end">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                            <span class="x-red">*</span>活动封面图
                        </label>
                        <div class="layui-input-inline">
                            <div class="site-demo-upbar">
                                <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item imgs" id="imgshow">
                        <label  class="layui-form-label">文章缩略图展示
                        </label>

                        <img src="images" id="pimages" name="pimages" style="width: 400px;height: 200px;"/>
                        <input id="avatar"   name="image"  type="hidden"  value="images">
                    </div>

                    <div style="height:100px;"></div>
                </div>

                <div class="layui-tab-item">
                    <!-- <form class="layui-form layui-form-pane" action="" id="add">-->
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                            <span class="x-red">*</span>活动详情
                        </label>
                        <div class="layui-input-inline">
                            <textarea  id="content" placeholder="" name="content"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <button class="layui-btn"  type="button" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                    <!--</form>-->
                </div>

            </div>

        </div>
    </form>
</div>

<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    UE.getEditor('content',{initialFrameWidth:600,initialFrameHeight:400,});
</script>
<script>
    layui.use(['element','layer','form','upload','laydate'], function(){
        var  $ = layui.jquery;//jquery
        var lement = layui.element;//面包导航
        var layer = layui.layer;//弹出层
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        // 异步查询活动类型


        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            ,url: '/admin/fileupload?opr=one' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                console.log(res);
                layer.msg(res.message,{icon: 16});
                $("#pimages").attr('src',res.data);
                $("#avatar").val(res.data);
                $(".imgs").show();
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            var title=$("input[name='title']").val();
            var actity_category_id=$('#actity_category_id option:selected') .val();//所属文章类型

            //var form=$("#cate_add").serialize();
            if(title==""){
                layer.msg('活动主题不能为空',{icon:5,time:2000});return false;
            }
            if(actity_category_id==""){
                layer.msg('活动类型不能为空',{icon:5,time:2000});return false;
            }

            var data = data.field;

            $.ajax({
                type:"post",
                url:'/admin/activity?opr=save',
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.flag){
                        layer.msg(data.message, {icon: 6,time:2000},function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            console.log("index",index);
                            parent.layer.close(index); //再执行关闭
                        });
                        return false;

                    }else{
                        layer.msg(data.message,{icon:5,time:2000});return false;
                    }
                }

            });

        });

        //执行一个laydate实例 格式化日期
        laydate.render({
            elem: '#end' //指定元素
        });
        laydate.render({
            elem: '#appllyTime' //指定元素
        });
        laydate.render({
            elem: '#start' //指定元素
        });


    })
</script>
<!--栏目缩略图上传-->

</body>
</html>